import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import moment from 'moment';
import { Form, DatePicker, Row, Col, Button, Input } from 'antd';
import styles from './recordList.less'

interface IProps {
  current?: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  new?: boolean
}

const ONE_PAGE_SIZE = 10;

@connect()
class Search extends Component<IProps> {

  search = e => { e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { date, contractName } = values;
        const data = {
          contractName: contractName ? contractName : null,
          createTimeStart: date ? moment(date[0]).format("YYYY-MM-DD") : null,
          createTimeEnd: date ? moment(date[1]).format("YYYY-MM-DD") : null
        };
        dispatch({
          type: 'record/updateCond',
          payload: {
            ...data
          }
        });
        this.props.initCurrent()
      }
    });
  }

  render() {
    const { form, dispatch } = this.props;
    const FormItem = Form.Item;
    const { RangePicker } = DatePicker;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 8 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 14 },
        sm: { span: 12 },
      },
    };
    return (
      <Form>
        <Row>
          <Col span={8} key={1}>
            <FormItem
              {...formItemLayout}
              label='报备时间'
            >
              {getFieldDecorator('date')(
                <RangePicker style={{ width: '220px' }} />
              )}
            </FormItem>
          </Col>
          <Col span={6} key={2}>
            <FormItem
              {...formItemLayout}
              label='联系人姓名'
            >
              {getFieldDecorator('contractName')(
                <Input placeholder='请输入联系人姓名' style={{'width': '150px'}}/>
              )}
            </FormItem>
          </Col>
          <Col span={2} key={3}>
            <Button htmlType="submit">搜 索</Button>
          </Col>
          <Col span={2} key={4} style={{'margin': '0 20px'}}>
            <Button onClick={(e) => {
              this.props.form.resetFields();
              this.search(e)
            }}>重 置</Button>
          </Col>
          <Col span={2} key={5}>
            <Link to='/data/record/applyRecord' onClick={() => {dispatch({ type: 'upload/uploadImg'})}}>
              <Button>消防报备</Button>
            </Link>
          </Col>
          <Col span={2} key={6} style={{'marginLeft': '20px'}}>
            <Link to='/data/record/deviceApply' onClick={() => {dispatch({ type: 'upload/uploadImg'})}}>
              <Button>设施报备</Button>
            </Link>
          </Col>
        </Row>
      </Form>
    );
  }
}

const SearchS = Form.create<IProps>()(Search);
export default SearchS;
